<template>
  <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="100px" class="demo-ruleForm dict-form">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-form-item label="标题" prop="title">
            <el-input v-model="formData.title" />
          </el-form-item>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="来源" prop="fdOrigin">
            <el-input v-model="formData.fdOrigin" />
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="类型" prop="fdType">
            <el-select v-model="formData.fdType">
              <el-option
                v-for="item in noticeTypes"
                :key="item.key"
                :label="item.key"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-col>
    </el-row>

    <el-form-item label="内容" prop="fdContent">
      <wang-editor v-model="formData.fdContent" :isClear="isClear" @change="changeContent"></wang-editor>
    </el-form-item>

    <el-form-item style="text-align: center;">
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="$router.back(-1)">返回</el-button>
    </el-form-item>

  </el-form>
</template>

<script>
import { save, getDataById } from '@/api/app/notice/index'
import WangEditor from '@/components/WangEditor/index'
export default {
  components: { WangEditor },
  data() {
    return {
      permissions: [],
      formData: {
        title: '',
        fdOrigin: '',
        fdType: '',
        fdContent: ''
      },
      rules: {
        deptName: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
        ],
        parentId: [
          { required: true, message: '请选择上级部门', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择部门类型', trigger: 'blur' }
        ]
      },
      noticeTypes: [
        {
          key: '公告',
          value: 1
        },
        {
          key: '新闻',
          value: 2
        }
      ],
      isClear: false
    }
  },
  created() {
    if (this.$route.query.id !== null) {
      this.formData.id = this.$route.query.id
      this.getData(this.formData.id)
    } else {
      this.$router.push({ name: 'notice_list' })
    }
  },
  methods: {
    getData(id) {
      getDataById(id).then(res => {
        this.formData = res.data
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          save(this.formData).then(() => {
            this.loading = false
            this.$router.push({ name: 'notice_list' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    changeContent(val) {
      console.log(val)
    }
  }
}
</script>

<style scoped>
.dict-form{
  padding-top: 30px;
  padding-right: 30px;
}
</style>
